<template>
    <a-card size="small">
        <h3 slot="title" class="title">
            <a-icon type="file-text" /> 基础信息
        </h3>
        <a-button slot="extra" type="primary" @click="$router.go(-1)">返回</a-button>
        <div class="flex">
            <div style="width:590px;">
                <k-form-build :value="formConf" ref="KFB" @submit="handleSubmit" />
                <a-button @click="getData" v-if="finished === 'true'" type="primary">提交</a-button>
            </div>
        </div>
        <div class="flex" v-if="finished === 'false'">
            <a-form class="form" :inline="false" :model="taskData" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }"
                size="small">
                <a-form-item label="审批意见">
                    <a-input placeholder="请输入" v-model="taskData.comment"></a-input>
                </a-form-item>
                <a-form-item>
                    <a-button @click="open" type="primary">审批</a-button>
                    <!-- <a-button @click="outForm" style="margin-left: 10px;">重置</a-button>
                    <a-button @click="outForm" style="margin-left: 10px;">重置</a-button> -->
                </a-form-item>
            </a-form>
        </div>
        <Approval :taskForm="taskForm" @handleSelectionChange="handleSelectionChange" @setTaskForm="setTaskForm"
            ref="Approval" />
    </a-card>
</template>

<script>
import { definitionStart, getProcessVariables, readXml, getFlowViewer } from "../../../components/process/api/definition";
import Approval from "./module/Approval.vue"
import { complete } from "../api/todo";
export default {
    data() {
        return {
            formData: {
                json: '',
                comment: ''
            },
            taskData: {
                comment: ''
            },
        }
    },
    components: {
        Approval
    },
    props: {
        finished: {
            type: String,
            default: 'false'
        },
        taskForm: {
            type: Object,
            default: () => { }
        },
        formConf: {
            default: () => { }
        }
    },
    watch: {
        'taskData.comment': function (val) {
            this.$emit('setTaskForm', { key: "comment", value: val })
        },
    },
    methods: {
        submitForm() {
            definitionStart(this.taskForm.procDefId, JSON.stringify(this.formData)).then(res => {
                console.log(res)
                if (res.code === 200) {
                    this.$message.success(res.msg)
                    this.$router.go(-1)
                } else {
                    this.$message.error(res.msg)
                }

            })
        },
        outForm() {
            this.formData = {}
        },
        open() {
            // this.$refs['Approval'].showModal();
            this.$refs.KFB.getData().then(res => {
                this.formData = res;
                this.$emit('setTaskForm', { key: "values", value: this.formData })
                complete(this.taskForm).then(response => {
                    this.$message.success(response.msg);
                });
            }).catch(err => {
                console.log(err, '校验失败')
            })

        },
        handleSelectionChange(list) {
            this.$emit('handleSelectionChange', list)
        },
        setTaskForm(val) {
            this.$emit('setTaskForm', val)
        },
        // 表单内提交按钮
        handleSubmit(p) {
            // 通过表单提交按钮触发，获取promise对象
            p().then(res => {
                // 获取数据成功
                alert(JSON.stringify(res))
            }).catch(err => {
                console.log(err, '校验失败')
            })
        },
        getData() {
            // 通过函数获取数据
            this.$refs.KFB.getData().then(res => {
                // 获取数据成功
                this.formData = res;
                this.submitForm()
            }).catch(err => {
                console.log(err, '校验失败')
            })
        },
        
        // 初始化表单数据
        setKFBdata(val){
            this.$refs.KFB.setData(val)
        }
    }
}
</script>

<style lang="less" scoped>

</style>